<template>
  <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
    :size="formSize" status-icon>
    <el-form-item label="商品分类" prop="name">
      <el-cascader v-model="state.ruleForm.value" :options="options" @change="handleChange" />
    </el-form-item>
    <el-form-item label="商品名称" prop="desc1">
      <el-input v-model="state.ruleForm.desc" type="text" placeholder="请输入商品名称" />
    </el-form-item>
    <el-form-item label="商品简介" prop="desc2">
      <el-input v-model="state.ruleForm.textarea" :rows="2" type="textarea" placeholder="请输入商品简介(100字)" />
    </el-form-item>
    <el-form-item label="商品价格" prop="desc3">
      <el-input v-model="state.ruleForm.desc1" type="number" placeholder="请输入商品价格" />
    </el-form-item>
    <el-form-item label="商品售卖价" prop="desc4">
      <el-input v-model="state.ruleForm.desc2" type="number" placeholder="请输入商品售价" />
    </el-form-item>
    <el-form-item label="商品库存" prop="desc5">
      <el-input v-model="state.ruleForm.desc3" type="number" placeholder="请输入商品库存" />
    </el-form-item>
    <el-form-item label="商品标签" prop="desc6">
      <el-input v-model="state.ruleForm.desc4" type="text" placeholder="请输入商品小标签" />
    </el-form-item>
    <el-form-item label="商品标签" prop="desc6">
      <el-radio-group v-model="state.ruleForm.desc5">
        <el-radio label="Sponsor" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="商品主图" prop="desc6">
      <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="详情内容" prop="desc6">
      <div id="toolbar-container"></div>
      <div id="editor-container"></div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">立即创建</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'ADD',
  }
</script>
<script setup>
  import {
    Plus
  } from '@element-plus/icons-vue'
  import '@wangeditor/editor/dist/css/style.css'
  import {
    createEditor,
    createToolbar,
    IEditorConfig,
    IDomEditor
  } from '@wangeditor/editor'
  import {
    reactive
  } from "vue"
  const state = reactive({
    ruleForm: {
      value: '',
      desc: '',
      desc1: '',
      desc2: '',
      desc3: '',
      desc4: '',
      textarea: '',
      desc5: 0,
    }
  })
  // 编辑器配置
  const editorConfig = {}
  editorConfig.placeholder = '请输入内容'
  editorConfig.onChange = (editor) => {
    // 当编辑器选区、内容变化时，即触发
    console.log('content', editor.children)
    console.log('html', editor.getHtml())
  }

  // 工具栏配置
  const toolbarConfig = {}

  // 创建编辑器
  const editor = createEditor({
    selector: '#editor-container',
    config: editorConfig,
    mode: 'default' // 或 'simple' 参考下文
  })
  // 创建工具栏
  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default' // 或 'simple' 参考下文
  })
</script>

<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>